<template>
	<view>
		<view class="box" :style="{height:Wh+'px',width:Ww+'px'}">
			<view class="image-shop">
				<image style="width: 70px; height: 70px;" src="../../static/icon-box/shop-cart.png" mode=""></image>
			</view>
			<view class="div2">
				<text style="font-size: 30px;">￥0</text><br />
				<text style="font-size: 15px;">另需打包费:￥0</text>
			</view>
			
			<view class="div3" @click="settlement">
				<uni-badge class="uni-badge-left-margin" :text="8" absolute="rightTop" :offset="[-3, -3]" size="normal">
				<view style="width: 50px; margin-top: 30%; margin-left: 40%;">结算</view>
				</uni-badge>
			</view>
					
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-shop",
		data() {
			return {
				Wh:80,
				Ww:330
			};
		},
		created(){
			const dataWindow=uni.getWindowInfo();
			// this.Wh=dataWindow.screenHeight*0.11
			// this.Ww=dataWindow.screenWidth-30
		},
		methods:{
			settlement(){
				console.log("123123")
			}
		}
	
	}
</script>

<style lang="scss">
.box{
	margin-left: 22px;
	opacity: 1;
	border-radius: 60px;
	background: rgba(0, 0, 0, 0.7);
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	.image-shop{
		grid-area: 1 / 1 / 2 / 3;
		
	}
	.div2{
		 grid-area: 1 / 3 / 2 / 8;
	     color: rgba(247, 248, 248, 1);
	}
	.div3{
		
		grid-area: 1 / 8 / 2 / 11;
		background: rgba(46, 167, 224, 1);
		border-bottom-right-radius: 35px;
		border-top-right-radius: 35px;
		font-size: 23px;
		font-weight: 500;
		color: rgba(247, 248, 248, 1);
		
	}
}
</style>